<!-- @author 任雪燕 -->
<template>
  <div class="app-container">
    <!-- 查询区域 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="学号">
        <el-input v-model="formInline.code" placeholder="学号"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="formInline.sname" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="专业">
        <el-select v-model="formInline.region" placeholder="专业">
          <el-option label="计算机科学与技术" value="计算机科学与技术"></el-option>
          <el-option label="软件工程" value="软件工程"></el-option>
          <el-option label="信息安全" value="信息安全"></el-option>
          <el-option label="网络工程" value="网络工程"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <div align="left">
      <el-button type="primary" @click="handleAddRole()">添加</el-button>
      <el-button type="primary" @click="flash()">刷新</el-button>
      <el-button type="primary" @click="close()">关闭网页</el-button>
    </div>

    <!-- 表格区域 -->
    <el-table :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column align="center" label="学号" width="150">
        <template slot-scope="scope">
          {{ scope.row.code }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="姓名" width="150">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="性别" width="150">
        <template slot-scope="scope">
          {{ scope.row.gender }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="所属学院" width="150">
        <template slot-scope="scope">
          {{ scope.row.studentArea.department }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="专业" width="150">
        <template slot-scope="scope">
          {{ scope.row.studentArea.major }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="班级" width="150">
        <template slot-scope="scope">
          {{ scope.row.studentArea.clazz }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="家庭住址" width="150">
        <template slot-scope="scope">
          {{ scope.row.address }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="电话号码" width="150">
        <template slot-scope="scope">
          {{ scope.row.tel }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="邮箱" width="200">
        <template slot-scope="scope">
          {{ scope.row.email }}
        </template>
      </el-table-column>

      <!-- 编辑,删除区域 -->
      <el-table-column label="操作" align="center" width="245" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="deleteById(scope.$index,scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页区域-->
    <div class="el-pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[6, 10, 12, 14]"
        :page-size="6" layout="total, sizes, prev, pager, next, jumper" :total="50">
      </el-pagination>
    </div>
    
     <el-button type="primary" @click="backTop()">返回顶部</el-button>

    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑':'添加'">
      <el-form :model="student" label-width="80px" label-position="left">
        <el-form-item label="学号">
          <el-input v-model="student.code" placeholder="学号" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="student.name" placeholder="姓名" />
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="student.gender" placeholder="性别" />
        </el-form-item>
        <el-form-item label="所属学院">
          <el-input v-model="student.department" placeholder="所属学院" />
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="student.major" placeholder="专业" />
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="student.clazz" placeholder="班级" />
        </el-form-item>
        <el-form-item label="家庭住址">
          <el-input v-model="student.address" placeholder="家庭住址" />
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="student.tel" placeholder="电话号码" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="student.email" placeholder="邮箱" />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmSrudent">确定</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
  import {
    getList
  } from '../../../../api/student/tableS.js'
  import {
    delStudentTableRow
  } from '../../../../api/student/tableS.js'

  const defaultRole = {
    code: '',
    name: '',
    gender: '',
    department: '',
    major: '',
    clazz: '',
    address: '',
    tel: '',
    email: '',
  }

  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        // 查询区域
        formInline: {
          code: '',
          sname: '',
          region: ''
        },
        student: Object.assign({}, defaultRole),
        dialogVisible: false,

        list: [{
          id: '666',
          code: '201808064101',
          name: '小张',
          gender: '男',
          department: '计算机学院',
          major: '软件工程',
          clazz: '软件181',
          address: '河南省焦作市',
          tel: '18300630213',
          email: 'xiaozhang@163.com',
        }],
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      // 查询
      onSubmit() {
        alert("查询失败！")
      },

      // 添加
      handleAddRole() {
        this.student = Object.assign({}, defaultRole)
        this.dialogType = 'new'
        this.dialogVisible = true
      },


      // 编辑区域
      handleEdit(scope) {
        this.dialogType = 'edit'
        this.dialogVisible = true
        this.student = deepClone(scope.row)
      },

      deleteById(ids, row) {
        alert("删除成功!");
        console.log("索引", ids);
        console.log("第", row, "行数据");
        console.log(row.id)
        delStudentTableRow(row.id).then((res) => {
          console.log(res)
        })
      },

      async confirmSrudent() {
        this.dialogVisible = false
      },

      // 分页区域
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },

      fetchData() {
        var vm = this;
        getList().then(res => {
          console.log(res.content);
          vm.list = res.content;
        })
      }
    },

    // 添加
    // addStudent(){
    //   this.$router.push("/form/student/add")
    // },


    // 编辑区域
    // edit(code) {
    //   // 路由传参，code
    //   // "/form/student/index/"+code
    //   this.$router.push("/form/student/index/" + code)
    // },


    // 删除区域
    // deleteStudent(code){

    // },
  }
</script>
